<template>
  <div class="semBody">
    <Header :menuIndex="menuIndex"></Header>
    <!-- 锚点切换 -->

    <a-drawer
      title="SchemeOverview"
      placement="left"
      :closable="false"
      :visible="isShowSchemeList"
      @close="onClose"
      :headerStyle="headerStyle"
      :drawerStyle="drawerStyle"
    >
      <div class="leftMenuTab">
        <ul class="tabBox" v-if="DepartmentList.length>0">
          <li
            v-for="(item, i) in DepartmentList"
            :key="i"
            class="panel"
            :class="currentSchemeIndex===i?'activeRed':''"
            @click="toAnchor(item,i)"
          >{{ item.ModuleName }}</li>
        </ul>
      </div>
    </a-drawer>
    <a-button class="openDrawerBtn" @click="toggleCollapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </a-button>
    <div class="semDetailBox">
      <!-- 统计部分 -->
      <div class="statisticsBox">
        <DemandEcharts :echartsInfo="echartsNumInfo" ref="echartDiv"></DemandEcharts>
      </div>
      <!-- 各部门 -->

      <div
        v-for="(item, index) in DepartmentList"
        :key="index"
        class="DepartmentBox"
        :id="item.ModuleName"
      >
        <div class="titleBar flex">
          <span class="t1">{{ item.ModuleName }}</span>
          <!-- <a-button class="addSmeBtn" @click="openSemPOp(item)" type="primary">Add</a-button> -->
        </div>
        <div class="content semUploadBox" v-if="item.ModuleId==='Common'">
          <div v-for="(v, i) in CommonInfo" :key="i">
            <div v-if=" CommonInfo.length>0">
              <a-popover :placement="tipOrientation">
                <template slot="content">
                  <p style="width:190px;">{{ v.Professional }}</p>
                </template>
                <div class="singlePerson">
                  <!-- <a-icon type="close-circle" class="closeIcon" @click="delEditSem(i)" /> -->
                  <div class="tc">
                    <img :src="v.HeadPortrait" class="userHeadImg" @error="errorImg" />
                  </div>
                  <p class="semText">
                    Name
                    <span class="t2">{{ v.UserName }}</span>
                  </p>
                  <p class="semText">
                    Department
                    <span class="t2">{{ v.DeptName }}</span>
                  </p>
                </div>
              </a-popover>
            </div>
            <a-empty v-else />
          </div>
        </div>
        <div class="content semUploadBox" v-else-if="item.ModuleId==='Operation'">
          <div v-for="(v, i) in OperationInfo" :key="i">
            <div v-if=" OperationInfo.length>0">
              <a-popover :placement="tipOrientation">
                <template slot="content">
                  <p style="width:190px;">{{ v.Professional }}</p>
                </template>
                <div class="singlePerson">
                  <!-- <a-icon type="close-circle" class="closeIcon" @click="delEditSem(i)" /> -->
                  <div class="tc">
                    <img :src="v.HeadPortrait" class="userHeadImg" @error="errorImg" />
                  </div>
                  <p class="semText">
                    Name
                    <span class="t2">{{ v.UserName }}</span>
                  </p>
                  <p class="semText">
                    Department
                    <span class="t2">{{ v.DeptName }}</span>
                  </p>
                </div>
              </a-popover>
            </div>
            <a-empty v-else />
          </div>
        </div>
        <div class="content semUploadBox" v-else-if="item.ModuleId==='Material' ">
          <div v-for="(v, i) in MaterialInfo" :key="i">
            <div v-if=" MaterialInfo.length>0">
              <a-popover :placement="tipOrientation">
                <template slot="content">
                  <p style="width:190px;">{{ v.Professional }}</p>
                </template>
                <div class="singlePerson">
                  <!-- <a-icon type="close-circle" class="closeIcon" @click="delEditSem(i)" /> -->
                  <div class="tc">
                    <img :src="v.HeadPortrait" class="userHeadImg" @error="errorImg" />
                  </div>
                  <p class="semText">
                    Name
                    <span class="t2">{{ v.UserName }}</span>
                  </p>
                  <p class="semText">
                    Department
                    <span class="t2">{{ v.DeptName }}</span>
                  </p>
                </div>
              </a-popover>
            </div>
            <a-empty v-else />
          </div>
        </div>
        <div class="content semUploadBox" v-else-if="item.ModuleId==='Engineering' ">
          <div v-for="(v, i) in EngineeringInfo" :key="i">
            <div v-if="EngineeringInfo.length>0">
              <a-popover :placement="tipOrientation">
                <template slot="content">
                  <p style="width:190px;">{{ v.Professional }}</p>
                </template>
                <div class="singlePerson">
                  <!-- <a-icon type="close-circle" class="closeIcon" @click="delEditSem(i)" /> -->
                  <div class="tc">
                    <img :src="v.HeadPortrait" class="userHeadImg" @error="errorImg" />
                  </div>
                  <p class="semText">
                    Name
                    <span class="t2">{{ v.UserName }}</span>
                  </p>
                  <p class="semText">
                    Department
                    <span class="t2">{{ v.DeptName }}</span>
                  </p>
                </div>
              </a-popover>
            </div>
            <a-empty v-else />
          </div>
        </div>
      </div>
    </div>

    <!-- 弹框部分 -->
    <!-- 编辑单个专家弹窗 -->
    <!-- <a-modal
      v-model="isOpenSingleEdit"
      title="SME"
      @ok="submitSingleEdit"
      :width="550"
      @cancel="closeSingleEditPop"
    >
      <div class="semBox">
        <div class="row" :key="imgKey">
          <label>Avatar:</label>
          <AvatarUpload @getAvatar="getAvatar"></AvatarUpload>
        </div>
        <div class="row">
          <label>Name:</label>
          <a-input v-model="User_Name" />
        </div>
        <div class="row">
          <label>Department:</label>
          <span>{{ stDepartment }}</span>
        </div>
        <div class="row">
          <label>Mail:</label>
          <a-input v-model="EMail" type="email" />
        </div>
        <p class="nextLine"></p>

        <div class="row">
          <label>Summary:</label>
          <a-textarea v-model="Summary" :rows="4" style="width:60%;" />
        </div>
      </div>
    </a-modal>-->
    <!-- 弹窗部分 -->
    <a-modal
      v-model="moudelVisible"
      :title="ModalTitle"
      @ok="handleOk"
      @cancel="cancleSubmit"
      :maskClosable="false"
    >
      <div>
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="Head portrait">
            <AvatarUpload @getAvatar="getAvatar" :propImageUrl="HeadPortrait"></AvatarUpload>
          </a-form-item>

          <a-form-item label="UserName" v-if="doType==='add'">
            <a-select
              show-search
              option-filter-prop="children"
              :filter-option="filterOption"
              @change="handleChange"
              allowClear
            >
              <a-select-option
                v-for="(item, index) in UserNoSmeInfo"
                :key="index"
                :value="index"
              >{{ item.UserName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="UserName" v-if="doType==='edit'">
            <a-input placeholder disabled v-model="EditUserName" />
          </a-form-item>
          <a-form-item label="NTID">
            <a-input disabled placeholder v-model="NTID" />
          </a-form-item>
          <!-- <a-form-item label="NTID" v-if="doType==='add'">
            <a-input placeholder v-model="NTID" />
          </a-form-item>-->

          <a-form-item label="Department">
            <a-select @change="EditDepartmentChange" v-model="EditDeptId" allowClear>
              <a-select-option
                v-for="(item, index) in DepartmentInfo"
                :key="index"
                :value="item.DeptId"
              >{{ item.DeptName }}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="Class">
            <a-select @change="EditClassChange" v-model="EditClassName" allowClear>
              <a-select-option
                v-for="(item, index) in ClassInfo"
                :key="index"
                :value="item "
              >{{ item }}</a-select-option>
            </a-select>
            <!-- <a-input disabled placeholder v-model="EditClassName" /> -->
          </a-form-item>
          <a-form-item label="Professional">
            <a-textarea placeholder v-model="Professional" style="min-height:88px;" allowClear />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>


<script>
import Header from '@/components/layout/header'
import AvatarUpload from '@/components/upload/AvatarUpload'
import pc from '@/public/public.js'
import DemandEcharts from '../solution/demandEcharts'

export default {
  data() {
    return {
      headerStyle: {
        background: '#white',
        color: 'white',
        'border-bottom': '1px solid #ff6a00',
      },
      drawerStyle: { background: 'white' },
      tabList: [],
      tabPosition: 'left',
      currentSchemeIndex: 0,
      DepartmentList: [],
      stDepartment_ID: '',
      stDepartment: '',
      isOpenSingleEdit: false,
      User_Name: '',
      HeadPortrait: '',
      EMail: '',
      Summary: '',
      NTID: '',
      PhoneNum: '',
      Sex: '',
      imgKey: '',
      editSemList: [],
      allSmeDetailList: [],
      menuIndex: 0,
      tipOrientation: 'bottom',
      isShowSchemeList: false,
      collapsed: false,
      ClassName: '',
      CommonInfo: [],
      OperationInfo: [],
      MaterialInfo: [],
      EngineeringInfo: [],
      moudelVisible: false,
      ModalTitle: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      doType: '',
      EditDeptId: '',
      DepartmentInfo: [],
      EditClassName: '',
      ClassInfo: ['Common', 'Operation', 'Material', 'Engineering'],
      Professional: '',
      UserNoSmeInfo: [],
      echartsNumInfo: {},
    }
  },
  components: {
    Header,
    AvatarUpload,
    DemandEcharts,
  },
  created() {
    if (this.$route.query.index) {
      this.menuIndex = this.$route.query.index
    }

    console.log('this.editSemList :>> ', this.editSemList)
  },
  mounted() {
    // this.getSemAllDepartment()
    this.getSmeModuleInfo()
    this.getSmeAllInfo()
    this.getDepartmentInfo()
    this.getUserBYNoSme()
  },
  methods: {
    addInfo() {
      const a = {
        method: 'SysUserSme_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          NTID: this.NTID,
          ClassName: this.EditClassName,
          Professional: this.Professional,
          HeadPortrait: this.HeadPortrait,
        },
      }
      this.$post(a).then((result) => {
        if (result.code == 0) {
          this.$message.success('Add successfully!')
          this.getSmeAllInfo()
        }
      })
    },
    getUserBYNoSme() {
      const a = {
        method: 'SysUser_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        fieldList: 'NTID,UserName,DeptName,DeptId',
        datas: {
          IsSme: '0',
        },
      }
      this.$post(a).then((result) => {
        this.UserNoSmeInfo = result.data.length > 0 ? result.data : []
      })
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      )
    },
    getDepartmentInfo() {
      let data = {}
      const a = {
        method: 'SysDept_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: this.currentPage,
        queMode: 'OR',
        limit: this.pageSize,
        datas: data,
      }
      this.$post(a).then((result) => {
        this.DepartmentInfo = result.data.length > 0 ? result.data : []
      })
    },
    EditDepartmentChange(value) {
      this.EditDeptId = value
    },
    getAvatar(e) {
      console.log('e :>> ', e)
      this.HeadPortrait = e
    },
    getSmeAllInfo() {
      this.CommonInfo = []
      this.OperationInfo = []
      this.MaterialInfo = []
      this.EngineeringInfo = []

      let Common = 0
      let Operation = 0
      let Material = 0
      let Engineering = 0

      const that = this
      const a = {
        method: 'SysUserSme_Que',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          ClassName: this.ClassName,
        },
      }
      this.$post(a).then((result) => {
        let data = result.data.length > 0 ? result.data : []
        data.map((item) => {
          if (item.ClassName === 'common' || item.ClassName === 'Common') {
            this.CommonInfo.push(item)
            Common += 1
          } else if (item.ClassName === 'Operation') {
            this.OperationInfo.push(item)
            Operation += 1
          } else if (item.ClassName === 'Material') {
            this.MaterialInfo.push(item)
            Material += 1
          } else if (item.ClassName === 'Engineering') {
            this.EngineeringInfo.push(item)
            Engineering += 1
          }
        })
        this.echartsNumInfo = {
          Common: Common,
          Operation: Operation,
          Material: Material,
          Engineering: Engineering,
        }
        this.$refs.echartDiv.init()
        console.log(' that.echartsNumInfo :>> ', that.echartsNumInfo)
      })
    },
    errorImg(event) {
      this.$pk.errorImg(event)
    },
    onClose() {
      this.isShowSchemeList = false
    },
    toggleCollapsed() {
      this.isShowSchemeList = true
      this.collapsed = !this.collapsed
    },
    openSemPOp(item) {
      console.log('item :>> ', item)
      // this.isOpenSingleEdit = true
      // this.stDepartment_ID = item.ModuleId
      // this.stDepartment = item.ModuleName
      this.EditClassName = item.ModuleName
      this.moudelVisible = true
      this.doType = 'add'
      // 清空参数
      this.NTID = ''
      this.EditDeptId = ''
      this.EditUserName = ''
      this.EditClassName = ''
      this.EditDeptName = ''
      this.HeadPortrait = ''
      this.Professional = ''
      this.ModalTitle = 'Add SME'
    },
    cancleSubmit() {
      this.DeptName = ''
      this.DeptId = ''
      this.RoleName = ''
      this.RoleId = ''
    },
    handleOk() {
      if (!this.NTID && this.doType === 'add') {
        this.$message.warn('Please enter the NTID')
        return
      } else if (!this.EditUserName) {
        this.$message.warn('Please enter the user name')
        return
      } else if (!this.EditDeptId) {
        this.$message.warn('Please Select the Department')
        return
      } else if (!this.EditClassName) {
        this.$message.warn('Please Select the Class')
        return
      }
      if (this.doType === 'edit') {
        this.editInfo()
      } else if (this.doType === 'add') {
        this.addInfo()
      }
      this.moudelVisible = false
    },

    EditClassChange(value) {
      this.EditClassName = value
    },

    cancelEditPop() {
      this.isOpenSingleEdit = false
      // this.editSemList = []
    },
    handleChange(value) {
      console.log(`selected ${value}`)
      let index = Number(value)
      this.EditDeptName = this.UserNoSmeInfo[index].DeptName
      this.EditDeptId = this.UserNoSmeInfo[index].DeptId
      this.EditUserName = this.UserNoSmeInfo[index].UserName
      this.EditClassName = this.UserNoSmeInfo[index].ClassName
      this.NTID = this.UserNoSmeInfo[index].NTID
      console.log('this.UserNoSmeInfo[index] :>> ', this.UserNoSmeInfo[index])
    },
    // 锚点跳转
    toAnchor(item, i) {
      this.currentSchemeIndex = i

      document.getElementById(item.ModuleName).scrollIntoView(true)
    },
    submitSingleEdit() {
      const a = {
        method: 'SysUserSme_Add',
        userId: window.userId || 1,
        sign: '1',
        currentPage: 0,
        limit: 0,
        datas: {
          User_Name: this.User_Name,
          User_Reallyname: this.User_Name,
          HeadPortrait: this.HeadPortrait,
          Department_ID: this.stDepartment_ID,
          EMail: this.EMail,
          Summary: this.Summary,
          NTID: this.NTID,
          PhoneNum: this.PhoneNum,
          Sex: this.Sex,
        },
      }
      if (!this.User_Name) {
        this.$message.warning('The user name cannot be empty!')
        return
      } else if (!this.HeadPortrait) {
        this.$message.warning('Please upload your profile picture!')
        return
      } else if (!pc.checkEmail(this.EMail) && this.EMail) {
        this.$message.warning('The email number format is incorrect!')
        return
      }
      this.$post(a).then((result) => {
        console.log('result.data :>> ', result.data)
        if (result.code === 0) {
          this.$message.success('Add Success!')
          this.getSemByDepartment(this.stDepartment_ID)
        }
      })
      this.isOpenSingleEdit = false
    },
    closeSingleEditPop() {
      this.isOpenSingleEdit = false
    },
    getSemAllDepartment() {
      const a = {
        method: 'User_Que',
        userId: window.userId || 1,
        sign: '19B39A0351B99062CCFDDE168E32D279',
        currentPage: 0,
        limit: 0,
        datas: {
          User_Type: 1, //0 普通 1 专家
        },
      }
      this.$post(a).then((result) => {
        console.log('result.data :>> ', result.data)
        this.semInfoList = result.data
      })
    },
    getSmeModuleInfo() {
      const a = {
        method: 'ShpModule_Que',
        userId: window.userId || 1,
        sign: 'A0251DD654CBB418AF1422CA880A1270',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {},
      }
      this.$post(a).then((result) => {
        console.log('result :>> ', result)
        this.DepartmentList = result.data
        this.stDepartment_ID = this.DepartmentList[0].ModuleId
        this.stDepartment = this.DepartmentList[0].ModuleName
        // const allSmeDetailList=[]
        // result.data.map(item=>{

        // })
      })
    },
    delEditSem(index) {
      // 倒序删除
      this.editSemList.splice(index, 1)
      if (this.editSemList.length === 1 && index === 0) {
        this.editSemList = []
      }
      // this.semInfoList[index].check = ''
      console.log('index :>> ', index)
    },
  },
}
</script>

<style lang="less" >
@import url('css/SmeSolution');
</style>